<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>消费记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/index.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/css/dropload.css" />
</head>
<style>
    .yue{
        color: #FF4B4A;
        text-align: right;
        width: 60px;
    }
    .weui-media-box_appmsg .weui-media-box__hd{
        width:30px;
        height: 30px;
    }
    .weui-media-box__title{
        font-size: 14px;
    }
    .weui-media-box__desc{
        font-size: 12px;
    }

     .harder{
         background: #1AAD19;
         padding:30px 30px 0 30px;
     }
    .conter{
        background:#fff;
        text-align:center;
        border-radius:20px 20px 0 0 ;
        padding:10px;
        color:#1AAD19;
        font-size: 13px;
    }
    .ictext{
        color: #858585;
        font-size:12px;
    }
    .bonus{
        font-size:25px;
    }
    .nav{
        width:100%;
        height: 37px;
        display:flex;
        flex-direction:row;
        background-color:#fff;
    }
    .default{
        text-align:center;
        flex:1;
        margin:10px 10px;

    }
    .red .ictext{
        color:#1AAD19
    }
    .red .row{
        text-align:center;
        flex:1;
        border-bottom:2px solid #1AAD19;
        margin: 8px 10px;

    }
    .card-title{
        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }
    .dhbtn{
        background: #FA8454;
        font-size: 13px;
        padding: 0px 15px;
        display: inline-block;
        line-height: 26px;
        border-radius: 3px;
        margin-top: 5px;
    }
    .box .pic-box .card-logo {
        background: #fff;
        border: 2px solid #ffffff;
        width: 57%;
        height: auto;
    }

    .box .pic-box img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 42px auto;
        border-radius: 4px 4px 0 0;
    }
    .box .box-text {
        padding: 0px 9px 9px 9px;
    }
</style>

<body>
<div class="container" id="container">
    <div class="harder">
        <div class="conter" id="id" data-id="{$user['card_id']}" data-openid="{$user['openid']}">
            <p>当前余额</p>
            <p class="bonus">{$user.balance}元</p>
        </div>
    </div>
    <hr style="margin:0px;height:4px;border:0px;color:#D5D5D5;"/>
    <div class="weui-tab__panel">
        <div class="nav bc_white">
            <div class="default red" onclick="getcate(this);" data-id="wx_balance">
                <div class="ictext ">会员卡记录</div>
                <div class="row"></div>
            </div>

            <div class="default" onclick="getcate(this);" data-id="wx_price">
                <div class="ictext ">微信支付记录</div>
                <div class="row"></div>
            </div>

        </div>
        <div class="weui-panel weui-panel_access" style="margin-top: 3px;" id="kind">
            <div class="list-box" id="list-box" style="">

            </div>
            <div class="list-box" id="wxlist-box" style="">

            </div>
            <div class="clear"></div>
        </div>
    </div>



</div>
</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="__STATIC_URL__/static/js/dropload1.js"></script>

<script type="text/javascript">
    wx.config({$share.wxjssdk});
    wx.ready(function(){
        wx.hideAllNonBaseMenuItem();

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
</script>
<script>
    $(function(){
        load("wx_balance", "1", "1");
    });

    function getcate(obj) {

        var types = $(obj).attr("data-id");
        if(types=="wx_balance"){
            $("#list-box").attr("style","display:block");
            $("#wxlist-box").attr("style","display:none");
        }else if(types=="wx_price"){
            $("#list-box").attr("style","display:none");
            $("#wxlist-box").attr("style","display:block");
        }
        $(obj).addClass("red").siblings().removeClass("red");

        load(types, "1", "2")
    }

    function load(types, page, type) {

        var num = 5;
        var page = 1;
        var card_id=$("#id").attr("data-id");
        var openid=$("#id").attr("data-openid");
        if (type == 2) {

            $("#list-box").html("");
            $(".dropload-down").remove();

        }
        var dropload = $('#kind').dropload({
            scrollArea:window,

            loadDownFn:function(me){

                $.ajax({
                    url: "{:url('')}",
                    type: 'post',
                    dataType: 'json',
                    data:{
                        type:types,
                        card_id:card_id,
                        openid:openid,
                        page:page
                    },
                    success: function (res) {
                        var pagenum=parseInt(res.page_num);
                        var pages=parseInt(res.page);

                        var result = '';
                        var data=res.data;
                        if(data==""&& pagenum ==0){
                            $("#zanwu").attr("style","display:block")
                        }
                        var html="";
                        var html3 ="";
                        var length=data.length;
                        if(res.code==0){
                            $("#zanwu").attr("style","display:none")

                            $(".dropload-load").show();

                            var img_url="";
                            page++;
                            for(var i=0;i<length;i++){
                                url="/mobile.php?s=/carduser/consumedetail/";
                                if(types=="wx_balance"){
                                   img_url="__STATIC_URL__/static/mobile/images/cardxf.png";
                                }else if(types=="wx_price"){
                                    img_url="__STATIC_URL__/static/mobile/images/wxxf.png";
                                }
                                result += ' <div class="weui-panel__bd">\n' +
                                    '            <a href="'+url+'recordid/'+data[i].id+'/type/'+types+'.html" class="weui-media-box weui-media-box_appmsg">\n' +
                                    '                <div class="weui-media-box__hd">\n' +
                                    '                    <img class="weui-media-box__thumb" src="'+img_url+'" alt="">\n' +
                                    '                </div>\n' +
                                    '                <div class="weui-media-box__bd neirong">\n' +
                                    '                    <h4 class="weui-media-box__title">'+data[i].merchant+'</h4>\n' +
                                    '                    <p class="weui-media-box__desc">'+data[i].add_time+'</p>\n' +
                                    '                </div>\n' +
                                    '                <div class="weui-media-box__bd yue">'+data[i].price+'</div>\n' +
                                    '            </a>\n' +
                                    '        </div>';
                                if(length < 5 &&  i ==(length-1) && pages == pagenum){
                                    // 锁定//表示一页未满已经没有数据
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            // $("#list-box").append(result)
                            if(types=="wx_balance"){
                                $("#list-box").append(result)
                            }else if(types=="wx_price"){
                                $("#wxlist-box").append(result)
                            }

                            me.resetload();

                        }else{

                            me.resetload();
                            me.lock();
                            // 无数据
                            me.noData();

                            if(page ==1){
                                $(".dropload-down").css("display","none");//没有更多数据的文字
                            }
                        };
                    },
                    error: function (xhr, type) {
                        // 即使加载出错，也得重置
                        me.resetload();
                        me.lock();
                        // 无数据
                        me.noData();

                    }
                });
            }
        });
    }

</script>
<script type="text/javascript">
    $(function() {
        $('.weui-navbar__item').on('click', function() {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__panel").css("display", "none").eq(index).css("display", "block");
        });

    });
</script>
<script type="text/javascript">
    $(function(){
        $(".sm").click(function(){
            if($(".chakan").css("display")=="none"){
                $(".chakan").css("display","block");
            }else{
                $(".chakan").css("display","none");
            }

        })
    })
</script>
</html>